<template>
  <div id="app">
    <div class="content">
      <div class="order-search-container">
        <span  class="address-select">
					{{ this.city }}
          <!-- 动态绑定箭头方向 -->
          <!--					<i :class="['arrow', DiZhi ? 'arrow-up' : 'arrow-down']"></i>-->
				</span>
        <span class="order-label"></span>
<!--        <van-search v-model="form.technicianName" placeholder="请输入搜索关键词"  class="search-input"/>-->
        <van-search
            v-model="form.technicianName"
            shape="round"
            background="#4fc08d"
            placeholder="请输入搜索关键词"
        />
        <span class="search-icon" @click="toggleSearch()">🔍︎</span>
        <van-icon name="location" @click="mapmap()"/>
<!--        <img src="../../assets/map.png" alt="" style="width: 20px;height: 20px" >-->
      </div>
      <div class="tabs">
					<span class="tab"  @click="quan()">
						全部技师
					</span>
        <span class="tab"  @click="ke()">
						可服务
					</span>
        <span class="tab"  @click="fu()">
						服务中
					</span>
      </div>
      <div class="tables">
        	<span class="sd"  @click="toggleSearch()">
						综合排序
					</span>
<!--        <span class="sd"  @click="selectPrice()">-->
<!--          价格-->
<!--					</span>-->
        <span class="sd"  @click="selectPrice()">
            <van-search
                v-if="showSearch"
                v-model="form.price"
                shape="round"
                background="#4fc08d"
                placeholder="请输入搜索关键词"

            />
          价格
        </span>

        <span class="sd"  @click="selectXiao()">
						销量
					</span>
        <span class="sd"  @click="selectHao()">
						好评
					</span>
      </div>






      <div>
        <!-- 动态渲染每个派单 -->
        <div v-for="(item, index) in tan" :key="index" class="order-item">
          <!-- 图片和内容部分 -->
          <div class="order-content" >
            <!-- 左侧图片 -->
            <div class="order-image">
              <img :src="item.img" alt="Item Image"/>
            </div>

            <!-- 右侧内容 -->
            <div class="order-text">
              <!-- 标题 -->
              <span class="title">{{ item.technicianName }}</span>
              <!-- 状态 -->
              <span v-if="item.status == 0 " class="order-status">
                 可服务
                </span>
              <span v-if="item.status == 1" class="order-statustwo">
             服务中
                </span>
              <span class="hospital">已服务:{{ item.serviceTotal }}单</span>
              <span class="">
                {{ item.distance }}km</span>
              <span class="hospital" style="color:red">{{ item.rating}}
              <van-icon name="star" />
              </span>
              <span class="appointment-time">
                <van-icon name="like-o" v-if="item.love==0"  @click="UpdateLove()"/>-
               <van-icon name="like" v-if="item.love==1" @click="UpdateLove()"/>
                收藏:{{ item.collect }}</span>
              <van-tag plain type="primary">最早可约{{item.earlyTime}}</van-tag>
            </div>
            <div class="order-price">
              <van-button
                  type="primary"
                  shape="square"
                  @click="Xinxi(item.id)"
                  style="display: flex;margin-top: 100px"
              >立即预约</van-button>
            </div>
          </div>
        </div>
      </div>
    </div>





    <van-tabbar v-model="active" active-color="#ee0a24" inactive-color="#000">
      <van-tabbar-item replace to="/homepage" icon="wap-home-o">首页</van-tabbar-item>
      <van-tabbar-item replace to="/category" icon="apps-o">理疗师</van-tabbar-item>
      <van-tabbar-item replace to="/shoppingcart" icon="shopping-cart-o">订单</van-tabbar-item>
      <van-tabbar-item replace to="/mine" icon="user-o">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>


<script>
import axios from 'axios';
import {Dialog} from 'vant';
import {Toast} from 'vant';
import MapLoader from "./util";




export default {
  setup() {

  },
  data() {
    return {
      value1:0,
      option1: [
        { text: '0--100元', value: 100 },
      ],
      sel:{},
      tp: 'https://img01.yzcdn.cn/vant/apple-1.jpg',
      ta: [],
      Ra: '',
      Qa: '',
      city: '定位中...',
      abcde: '',
      active: 1,
      value: "",  // 搜索框的值
      showSearch: false,  // 控制搜索框显示或隐藏
      activeIndex: 8,  // 默认选中第一个 tab
      tan: [],
      form: {},
      time: {},
      user: {},
      showPopup: false,
      showPopup2: false, // 控制弹窗显示
      minDate: new Date(2024, 11, 20),  // 设置最小日期
      maxDate: new Date(2025, 11, 31), // 设置最大日期
      zid:null,
    }

  },
  created() {
    MapLoader();
    var item = sessionStorage.getItem("userDB");
    if (item == null) {
      location.href = "#/login";
    }
    this.user = JSON.parse(item);
    // this.findPage();

    // 延迟获取地理位置
    setTimeout(() => {
      this.Ra = localStorage.getItem("R");
      this.Qa = localStorage.getItem("Q");
      this.abcde = this.Ra + ',' + this.Qa
      this.addresaaa();
    }, 2000);
    const zid = this.$route.query.zid;
    if (zid !=null) {
      this.setActive(zid);
    }else {
      this.setActive(8);
    }
  },
  methods: {

    mapmap(){
      location.href="#/map";
    },
    // 好评
    selectHao(){
      axios.get(`http://localhost:10086/technician/selectHao`).then(res=>{
        this.tan = res.data;
      })
      console.log("好评")
    },
    // 价格筛选
    selectPrice(){
      // this.form = {};
      // this.showSearch = !this.showSearch;  // 切换搜索框显示状态
      // console.log(this.value1+"qqqqqqqqqqqqqqqq")
      // axios.post(`http://localhost:10086/technician/selectPrice`,this.form).then(res=>{
      //   this.tan = res.data;
      // })
      // this.toggleSearch();
      // console.log("价格")
      location.href="#/selectprice";
    },
    // 销量筛选
    selectXiao(){
      axios.get(`http://localhost:10086/technician/selectXiao`).then(res=>{
        this.tan = res.data;
      })
      console.log("销量")
    },
    toggleStatus(){
      this.SelectStatus();
    },
    SelectStatus(){
      axios.post(`http://localhost:10086/technician/selectStatus`,this.sel).then(res=>{
        this.tan = res.data;
      })
    },
    addresaaa() {
      console.log(this.Ra);
      console.log(this.Qa);
      axios.get(`https://restapi.amap.com/v3/geocode/regeo?output=JSON&location=${this.abcde}&key=56568fc379b72f35a94228f39c6ae2ec&radius=1000&extensions=all `).then(res => {
            // 获取市级
            // this.city=res.data.regeocode.addressComponent.district
            // 获取区级
            this.city = res.data.regeocode.addressComponent.province
            console.log("当前地理位置：" + this.city)
          }
      )
    },
    onFloatingButtonClick(){
        console.log("被点击了")
    },
    contactCustomer(rescuersPhone) {
      const confirmation = confirm(`您确定要拨打电话给 ${rescuersPhone} 吗？`);
      if (confirmation) {
        window.location.href = 'tel:' + rescuersPhone;  // 使用 rescuersPhone
      }
    },
    //结束确认选择
    onCancel1(value) {
      this.time.orderEndtime = value;
      this.showPopup2 = false;
      if (this.time.orderBegintime >= this.time.orderEndtime) {
        Toast.fail('结束时间不能大于开始时间');
        return;
      }
      // 将时间转换为 "YYYY-MM-DD HH:mm:ss" 格式
      const formatDate = (date) => {
        const d = new Date(date);
        const year = d.getFullYear();
        const month = ('0' + (d.getMonth() + 1)).slice(-2); // 月份从0开始，所以加1
        const day = ('0' + d.getDate()).slice(-2);
        const hours = ('0' + d.getHours()).slice(-2);
        const minutes = ('0' + d.getMinutes()).slice(-2);
        const seconds = ('0' + d.getSeconds()).slice(-2);

        return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
      };

      const formattedBeginTime = formatDate(this.time.orderBegintime);
      const formattedEndTime = formatDate(this.time.orderEndtime);

      // 将格式化后的时间存入 form 对象
      this.time.orderBegintime = formattedBeginTime;
      this.time.orderEndtime = formattedEndTime;
      axios.post("http://123.56.135.19:5432/api-nurse-service/pzph-order/updateTime", this.time).then(res => {
        Toast.success('修改成功');
      })

    },
    // 开始确认选择
    onConfirm(value) {
      this.time.orderBegintime = value;
      this.showPopup = false;
      this.showPopup2 = true;
    },
    // 取消选择
    onCancel() {
      this.showPopup = false;
      this.showPopup2 = false;
    },
    XiuGai(id) {
      this.time = {};
      this.time.id = id;
      this.showPopup = true
    },
    tiqian(id) {
      Dialog.confirm({
        message: '确定提前完成',
      }).then(() => {
        axios.post(`http://123.56.135.19:5432/api-nurse-service/pzph-order/finishUpdate?id=${id}`).then(res => {
          this.setActive(8);
        })
      }).catch(() => {

      });
    },
    Xinxi(id) {
      sessionStorage.setItem('Tid',id)
      // this.Zhan = !this.Zhan;
      location.href = `#/fu?tid=${id}`;
      // location.href='#/fu'
    },
    toggleSearch() {
      // this.showSearch = !this.showSearch;  // 切换搜索框显示状态
      // this.setActive(8);
      // this.form = {};
      axios.post("http://localhost:10086/technician/findAll2", this.form).then(res=>{
        this.tan = res.data;
      })
    },
    ke(){
      this.form.status=0
      this.toggleSearch()
    },
    fu(){
      this.form.status=1
      this.toggleSearch()
    },
    quan(){
        this.form.status=null
        this.toggleSearch()
    },

    // 查询状态不为3的订单
    setActive(index) {
      // 设置点击的标签为当前激活标签
      this.activeIndex = index;
      //将标签状态传给后台
      this.form.orderStatus = index;
      this.form.userEscortid = this.user.id;
      axios.post("http://localhost:10086/technician/findAll2", this.form).then(res => {
        this.tan = res.data;
      })
    }
  },
}
</script>

<style>
/* 确保页面内容区域不会被 tabbar 遮挡 */
.page-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  /* 保证页面高度至少为屏幕高度 */
}

.order-buttons {
  display: flex;
}
/* 内容部分 */
.content {
  flex: 1;
  /* 使内容部分占满剩余空间 */
  padding-bottom: 100px;
  /* 给内容部分底部留出空间，以避免被 Tabbar 遮挡 */
}

/* 固定 Tabbar */
.fixed-tabbar {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  z-index: 100;
  /* 确保 Tabbar 在最上层 */
  background-color: #fff;
  /* 设置背景颜色以便清晰显示 */
}

.order-search-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 100px;
  max-width: 100%;
  /* 最大宽度，可根据需要调整 */
  padding: 10px;
  box-sizing: border-box;
  background-color: #4fc08d;
  /* 可根据需要设置背景色 */
  border-radius: 8px;
  /* 可根据需要调整圆角 */
  position: fixed;
  /* 固定位置 */
  top: 0;
  /* 固定在页面顶部 */
  left: 50%;
  /* 水平居中 */
  transform: translateX(-50%);
  /* 确保完全居中 */
  z-index: 1000;
  /* 保证它在页面其他元素之上 */
}
.address-select {
  display: inline-flex;
  /* 使用flex布局，使文本和箭头对齐 */
  align-items: center;
  /* 垂直居中对齐 */
  padding: 8px 13px;
  /* 设置内边距 */
  font-size: 16px;
  /* 字体大小 */
  color: #333;
  /* 字体颜色 */
  background-color: #f0f0f0;
  /* 背景色 */
  border-radius: 25px;
  /* 圆角效果 */
  border: 1px solid #ddd;
  /* 边框 */
  cursor: pointer;
  /* 鼠标悬停时显示为可点击 */
  transition: all 0.3s ease;
  /* 平滑的过渡效果 */
}
.order-label {
  font-size: 30px;
  color: #333;
  font-weight: bold;
}

.search-input {
  flex-grow: 1;
  /* 使搜索框在中间自动伸展 */
  margin: 0 10px;
  /* 左右间距，避免和其他元素重叠 */
  max-width: 400px;
  /* 限制搜索框的最大宽度 */
  height: 60px;

  border: none;
}

.search-icon {
  cursor: pointer;
  font-size: 30px;
  color: #007aff;
  /* 蓝色，增强点击性 */
  transition: color 0.3s ease;
}

.search-icon:hover {
  color: #005bb5;
  /* 悬浮时改变颜色 */
}

/* 状态 */
.tabs {
  width: 100%;
  background: orange;
  display: flex;
  //justify-content: space-between;
  /* 设置上边距 */
  margin-top: 50px; /* 可以根据需要调整这个值 */
  color:white;
  //margin-left: 10px;


}
.tables {
  width: 100%;
  background: white;

  display: flex;
//justify-content: space-between;
  /* 设置上边距 */
   /* 可以根据需要调整这个值 */

//margin-left: 10px;

  /* 平均分配间隔 */
}
.sd {
  color: black;
  padding: 10px;
  text-align: center;
  font-size: 18px;
  cursor: pointer;
  transition: color 0.3s, border-bottom 0.3s;
  flex-grow: 1;
  /* 平均分配每个 tab 的宽度 */
}

.tab {
  color: white;
  padding: 10px;
  text-align: center;
  font-size: 22px;
  cursor: pointer;
  transition: color 0.3s, border-bottom 0.3s;
  flex-grow: 1;
  /* 平均分配每个 tab 的宽度 */
}

.tab.active {
  color: #f30909;
  /* 激活时文字颜色 */
  border-bottom: 2px solid #ef1616;
  /* 激活时下划线 */
}

.tab:hover {
  color: #333333;
  /* 悬停时文字颜色 */
}


/* 信息 */
.order-item {
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
  padding: 15px;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.order-content {
  display: flex;
  margin-bottom: 10px;
  position: relative;
  /* 使得子元素的 absolute 定位基于此容器 */
}

.order-image img {
  width: 120px;
  height: 120px;
  object-fit: cover;
  border-radius: 8px;
  margin-top: 15px;
}

.order-text {
  margin-left: 15px;
  flex: 1;
}

/* 标题样式：展示在左上角，字号26px，黑色 */
.order-text .title {
  font-size: 26px;
  color: black;
  display: block;
  /* 确保它单独占一行 */
  margin-bottom: 10px;
  /* 标题和其他内容之间的间距 */
}


.order-status {
  color: green;
  font-size: 18px;
  /* 状态字体增大 */
  font-weight: bold;
  position: absolute;
  top: 4px;
  right: 0;
  transform: rotate(15deg);  /* 设置30度倾斜 */
}

.order-statustwo {

  color: red;
  font-size: 18px;
  /* 状态字体增大 */
  font-weight: bold;
  position: absolute;
  top: 4px;
  right: 0;

}

.order-text .hospital,
.order-text .appointment-time,
.order-text .patient-info {
  font-size: 14px;
  color: gray;
  display: block;
  /* 确保每项内容单独占一行 */
  margin-top: 8px;
  /* 内容之间的间距 */
}

.order-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid #ccc;
  /* 添加灰色的上边框 */
  padding: 18px 0;
  /* 设置上下内边距为 10px，左右为 0 */
}


.price-label {
  color: #333;
  /* 深灰色，让文字更易读 */
  font-size: 14px;
  /* 字体大小 */
  font-weight: bold;
  /* 加粗文字，突出显示 */
}

.price-amount {
  color: red;
  font-size: 18px;
  font-weight: bold;
  margin-left: 10px;
  /* 向右移动 10px */
}

.price-amounttwo {
  color: rgb(197, 193, 193);
  font-size: 24px;
  font-weight: bold;
  margin-left: 10px;
  /* 向右移动 10px */
}

/* 通用按钮样式 */
.order-buttons {
  padding: 0px 6px;
  /* 设置按钮的内边距 */
  font-size: 13px;
  /* 设置字体大小 */
  border: 1px solid #ccc;
  /* 边框统一为 1px，颜色为浅灰 */
  border-radius: 20px;
  /* 边框圆角 */
  cursor: pointer;
  /* 鼠标悬停时显示为可点击状态 */
  transition: all 0.3s ease;
  /* 平滑过渡效果 */
  width: auto;
  /* 按钮宽度自动 */
  display: inline-block;
  /* 使按钮以块级元素显示 */
  margin-left: 4px;
  /* 设置按钮之间的右外边距为 10px */
  float: right; /* 按钮向右浮动 */
  margin-top: 1px;
}

/* '联系客服' 按钮的样式 */
.contact-button {
  color: gray;
  /* 字体颜色为灰色 */
  background-color: white;
  /* 背景色为白色 */
}

.contact-button:hover {
  background-color: #f0f0f0;
  /* 悬停时背景色稍微变浅 */
  border-color: #bbb;
  /* 边框颜色变浅 */
}

/* 其他按钮（修改时间、提前完成）的样式 */
.action-button {
  color: white;
  /* 字体颜色为白色 */
  background-color: red;
  /* 背景色为红色 */
}

.action-button:hover {
  background-color: #c80000;
  /* 悬停时背景色稍微变深 */
}
</style>